{% extends "base.html" %}

{% block title %}餐厅列表{% endblock %}

{% block content %}
<div class="container">
    <!-- 搜索栏 -->
    <div class="row mb-4">
        <div class="col-md-8 mx-auto">
            <form class="d-flex" method="get">
                <input class="form-control me-2" type="search" name="q" placeholder="搜索餐厅名称..." 
                       value="{{ request.GET.q|default:'' }}">
                <button class="btn btn-primary" type="submit">
                    <i class="fas fa-search"></i> 搜索
                </button>
            </form>
        </div>
    </div>

    <!-- 餐厅列表 -->
    <div class="row row-cols-1 row-cols-md-3 g-4">
        {% for restaurant in restaurants %}
        <div class="col">
            <div class="card h-100 restaurant-card">
                {% if restaurant.image %}
                <img src="{{ restaurant.image.url }}" class="card-img-top" alt="{{ restaurant.name }}"
                     style="height: 200px; object-fit: cover;">
                {% else %}
                <div class="card-img-top bg-light d-flex align-items-center justify-content-center"
                     style="height: 200px;">
                    <i class="fas fa-store fa-3x text-muted"></i>
                </div>
                {% endif %}
                <div class="card-body">
                    <h5 class="card-title">{{ restaurant.name }}</h5>
                    <p class="card-text text-muted">{{ restaurant.description|truncatechars:100 }}</p>
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <i class="fas fa-star text-warning"></i>
                            <span>{{ restaurant.rating|default:"暂无评分" }}</span>
                        </div>
                        {% if restaurant.is_open %}
                        <span class="badge bg-success">营业中</span>
                        {% else %}
                        <span class="badge bg-danger">休息中</span>
                        {% endif %}
                    </div>
                </div>
                <div class="card-footer bg-transparent border-top-0">
                    <a href="{% url 'order:restaurant_detail' restaurant.id %}" 
                       class="btn btn-primary w-100">
                        <i class="fas fa-arrow-right"></i> 查看详情
                    </a>
                </div>
            </div>
        </div>
        {% empty %}
        <div class="col-12 text-center py-5">
            <i class="fas fa-store-slash fa-3x text-muted mb-3"></i>
            <h4 class="text-muted">暂无餐厅信息</h4>
            {% if request.GET.q %}
            <p class="text-muted">没有找到与"{{ request.GET.q }}"相关的餐厅</p>
            <a href="{% url 'order:restaurant_list' %}" class="btn btn-primary">
                <i class="fas fa-redo"></i> 显示所有餐厅
            </a>
            {% endif %}
        </div>
        {% endfor %}
    </div>

    <!-- 分页 -->
    {% if is_paginated %}
    <nav class="mt-4">
        <ul class="pagination justify-content-center">
            {% if page_obj.has_previous %}
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if request.GET.q %}&q={{ request.GET.q }}{% endif %}">
                    <i class="fas fa-chevron-left"></i> 上一页
                </a>
            </li>
            {% endif %}
            
            {% for num in page_obj.paginator.page_range %}
            {% if page_obj.number == num %}
            <li class="page-item active">
                <span class="page-link">{{ num }}</span>
            </li>
            {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
            <li class="page-item">
                <a class="page-link" href="?page={{ num }}{% if request.GET.q %}&q={{ request.GET.q }}{% endif %}">
                    {{ num }}
                </a>
            </li>
            {% endif %}
            {% endfor %}

            {% if page_obj.has_next %}
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if request.GET.q %}&q={{ request.GET.q }}{% endif %}">
                    下一页 <i class="fas fa-chevron-right"></i>
                </a>
            </li>
            {% endif %}
        </ul>
    </nav>
    {% endif %}
</div>

<style>
.restaurant-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.restaurant-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.card-img-top {
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}

.pagination .page-link {
    color: var(--primary-color);
    padding: 0.5rem 1rem;
}

.pagination .page-item.active .page-link {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.pagination .page-link:hover {
    background-color: var(--light-color);
    border-color: var(--primary-color);
    color: var(--primary-color);
}
</style>
{% endblock %}
